.recommend-container {
    margin-bottom: 16px;
    background-color: $common-white-color;
    border-radius: $common-border-radius;
    padding: 20px;
    .recommend-title {
        // margin-bottom: 15px;
        svg {
            width:1.6em;
            height: 1.6em;
            animation: pulsate-bck 1s ease-in-out infinite both;
        }
        span {
            font-size: 18px;
            margin-left: 5px;
            // color: $common-dark-orange-color;
        }
    }
    .recommend-main {
        margin: 15px 0;
        .content {
            display: flex;
            height: 70px;
            margin-bottom: 10px;
            cursor: pointer;
            .content-image {
                min-width: 40%;
                height: 100%;
                margin-right: 8px;
                @include border-radius(4px);
                overflow: hidden;
                position: relative;
                .overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: $bg-overlay-color;
                    opacity: 0;
                    transition: opacity .2s;
                    z-index: 5;
                }
                .el-img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                width: 100%;
                font-size: 16px;
                transition: color .2s;
            }
        }
        .content:hover {
            p {
                color: $common-dark-orange-color;
            }
            .content-image {
                .overlay {
                    opacity: 1;
                }
            }
        }
        .recommend-time {
            color: $text-grey-color !important;
            span {
                margin-left: 5px;
                font-size: 14px;
            }
        }
    }
}
.recommend-container:hover {
    box-shadow: $hover-card-shadow;
}